<template>
	<view class="app-good-shop-recommendation">
		<view class="app-top-title dir-left-nowrap main-between cross-center" v-if="!showGoods && type === 'mch'">
			<view class="app-left dir-left-nowrap cross-center">
				<icon class="icon"></icon>
				<text>好店推荐</text>
			</view>
			<view class="app-right dir-left-nowrap cross-center">
				<app-jump-button form url="/plugins/mch/list/list">
					<text>更多</text>
					<icon class="icon"></icon>
				</app-jump-button>
			</view>
		</view>
		<view class="app-content" :style="[{'background-color':`${temp.data.backgroundColor}`}]" v-if="!showGoods">
			<scroll-view scroll-x class="app-scroll">
				<view class="app-item"
					:style="[{'background-color':`${cardStyle < 3 ? '#ffffff': ''}`,'border': `${cardStyle == 2 ? '2rpx solid #e2e2e2': '0'}`}]"
					v-for="(item, index) in list" :key="index">
					<app-jump-button arrangement="column" form :url="'/plugins/mch/shop/shop?mch_id=' + item.id">
						<image class="app-image" :src="item.picUrl"></image>
						<text class="app-name u-line-1">
							{{item.name}}
						</text>
					</app-jump-button>
				</view>
			</scroll-view>
		</view>
		<view class="app-goods-shop" v-if="showGoods">
			<view class="app-shop"
				:style="[{'background-color':`${cardStyle < 3 ? '#ffffff': ''}`,'border': `${cardStyle == 2 ? '2rpx solid #e2e2e2': '0'}`}]"
				v-for="(item, index) in list" :key="index">
				<view class="app-top dir-left-nowrap main-between" @click.stop="jump(item.id)">
					<view class="dir-left-nowrap">
						<image class="app-image" :src="item.pic_url"></image>
						<view class="app-title">
							<text class="app-name t-omit-two">{{item.name}}</text>
							<view class="app-number-title">
								<text class="app-shops">商品数量: {{item.goods_num}}</text>
								<text class="app-sell">已售: {{item.order_num}}</text>
							</view>
						</view>
					</view>
					<view v-if="item.distance" class="box-grow-0 distance">距离{{item.distance}}</view>
					<view class="app-button-jump" v-else>
						<app-jump-button form>
							<view class="app-button">进店逛逛</view>
						</app-jump-button>
					</view>
				</view>
				<!-- <view class="app-bottom" v-if="item.goodsList.length !== 0">
					<scroll-view class="app-scroll" scroll-x>
						<view class="app-item" :style="{marginLeft: number !== 0 ? '8rpx' : '0'}"
							v-for="(good, number) in item.goodsList" :key="number">
							<app-jump-button form @click.native.stop="router_jump(good, item.id)">
								<image class="app-image" :src="good.picUrl"></image>
								<text class="app-price" :class="theme+ '-m-text ' + theme">￥{{good.price}}</text>
							</app-jump-button>
						</view>
					</scroll-view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex';

	export default {
		name: "app-good-shop-recommendation",

		props: {
			showGoods: {
				type: Boolean,
				default: function() {
					return false;
				}
			},
			cardStyle: {
				type: String,
				default: function() {
					return '1';
				}
			},
			type: {
				type: String,
				default () {
					return 'mch';
				}
			},
			backgroundColor: {
				type: String,
				default () {
					return '#fff';
				}
			},
			theme: String,
			page_id: Number,
			index: {
				type: Number,
			},
			is_required: Boolean,
			mch_list: Array,
			coupon_req: Boolean
		},
		computed: {
			...mapGetters('mallConfig', {
				getVideo: 'getVideo'
			}),
		},

		methods: {
			jump(data) {
				if (this.$store.state.apiurl.mall_id == 1) {
					this.$jump({
						url: `/plugins/mch/shop/shop?mch_id=${data}`,
						open_type: 'navigate',
					});
				} else {
					this.$jump({
						url: `/pages/store/boutique/boutique?mch_id=${data}&mall_id=${this.$store.state.apiurl.mall_id}`,
						open_type: 'navigate',
					});
				}

			},
			router_jump(data, id) {
				// #ifndef MP-BAIDU
				if (data.goodsWarehouse.video_url && this.getVideo == 1) {
					uni.navigateTo({
						url: `/pages/goods/video?goods_id=${data.id}&sign=mch`
					});
				} else {
					uni.navigateTo({
						url: `/plugins/mch/goods/goods?id=${data.id}&mch_id=${id}`,
					});
				}
				// #endif

				// #ifdef MP-BAIDU
				uni.navigateTo({
					url: `/plugins/mch/goods/goods?id=${data.id}&mch_id=${id}`,
				});
				// #endif
			},
			loadData() {
				this.$request({
					url: this.$api.index.extra,
					data: {
						type: this.page_id === 0 ? 'mall' : 'diy',
						key: 'mch',
						page_id: this.page_id,
						index: this.index,
						longitude: 0,
						latitude: 0
					}
				}).then(e => {
					this.list = e.data;
					if (this.page_id === 0) {
						let storage = this.$storage.getStorageSync('INDEX_MALL');
						storage.home_pages[this.index].list = this.list;
						this.$storage.setStorageSync('INDEX_MALL', storage);
					}
				})
			}
		},

		data() {
			return {
				list: []
			}
		},

		watch: {
			mch_list: {
				handler(data) {
					if (this.coupon_req) {
						this.list = data;
					}
				},
				deep: true
			}
		},
		mounted() {
			if (this.coupon_req) {
				this.list = this.mch_list;
			} else {
				if (this.is_required) {
					this.loadData();
				} else {
					let storage = this.$storage.getStorageSync('INDEX_MALL');
					this.list = storage.home_pages[this.index].list;
				}
			}
		},
	}
</script>

<style scoped lang="scss">
	.app-good-shop-recommendation {
		width: #{750rpx};

		.distance {
			align-self: flex-start;
			padding-top: #{36rpx};
			font-size: #{24rpx};
			color: #999999;
			float: right;
			padding-right: #{50rpx};
		}

		.app-top-title {
			width: #{750rpx};
			height: #{80rpx};
			border-bottom: #{1rpx} solid #e2e2e2;
			background-color: #ffffff;

			.icon {
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}

			.app-left {
				height: #{80rpx};

				.icon {
					width: #{46rpx};
					height: #{46rpx};
					background-image: url("../../../static/image/icon/good-shop.png");
					margin-left: #{24rpx};

				}

				text {
					font-size: #{26rpx};
					color: #ff8831;
					margin-left: #{16rpx};
				}
			}

			.app-right {
				height: #{80rpx};

				.icon {
					width: #{12rpx};
					height: #{22rpx};
					background-image: url("../../../static/image/icon/arrow-right.png");
					margin-right: #{24rpx};
				}

				text {
					font-size: #{26rpx};
					color: #999999;
					margin-right: #{12rpx};
				}
			}
		}

		.app-content {
			width: #{750rpx};
			padding: #{12rpx} 0;

			.app-scroll {
				width: #{750rpx};
				padding-left: #{16rpx};
				white-space: nowrap;
				height: #{224+20+20+23rpx};

				.app-item {
					display: inline-block;
					width: #{224rpx};
					height: #{224+20+20+24rpx};
					margin: 0 #{8rpx};
					border-radius: #{16rpx};

					.app-image {
						width: #{224rpx};
						height: #{224rpx};
						border-top-left-radius: #{16rpx};
						border-top-right-radius: #{16rpx};
					}

					.app-name {
						height: #{24+20+20rpx};
						/* #ifndef MP-ALIPAY */
						width: #{189rpx};
						/* #endif */
						/* #ifdef MP-ALIPAY */
						width: #{195rpx};
						/* #endif */
						font-size: #{24rpx};
						color: #353535;
						line-height: #{24+20+20rpx};
						display: inline-block;
						overflow: hidden;
						text-align: center;
					}
				}
			}
		}

		.app-goods-shop {
			width: #{750rpx};
			padding: #{20rpx};

			.app-shop {
				width: #{750-20-20rpx};
				padding: 0 #{24rpx};
				margin-top: #{20rpx};
				margin-bottom: #{20rpx};
				overflow: hidden;
				border-radius: #{16rpx};

				.app-top {
					width: #{750-20-20-24-24rpx};
					margin: #{24rpx} 0;

					.app-image {
						width: #{100rpx};
						height: #{100rpx};
						border-radius: #{8rpx};
					}

					.app-title {
						margin-left: #{24rpx};
						margin-top: #{36-24rpx};
						width: #{370rpx};

						.app-name {
							font-size: #{28rpx};
							color: #353535;
						}

						.app-number-title {
							margin-top: #{12rpx};
							color: #999999;
							font-size: #{24rpx};

							.app-sell {
								margin-left: #{32rpx};
							}
						}
					}

					.app-button-jump {
						float: right;
						margin-right: #{24rpx};
						width: #{144rpx};
						height: #{64rpx};
						margin-top: #{18rpx};
						margin-bottom: #{18rpx};

						.app-button {
							width: #{144rpx};
							height: #{64rpx};
							text-align: center;
							border: #{1rpx} solid #cccccc;
							font-size: #{26rpx};
							color: #666666;
							line-height: #{64rpx};
							border-radius: #{40rpx};
						}
					}
				}

				.app-bottom {
					height: #{210+23rpx};
					width: #{750-20-20-24-24rpx};
					padding-bottom: #{23rpx};

					.app-scroll {
						height: #{210rpx};
						width: #{750-20-20-24-24rpx};
						white-space: nowrap;
						margin-bottom: #{23rpx};

						.app-item {
							/*background-color: red;*/
							display: inline-block;
							width: #{210rpx};
							height: #{210rpx};
							margin-left: #{8rpx};
							margin-right: #{8rpx};
							position: relative;

							.app-image {
								width: #{210rpx};
								height: #{210rpx};
							}

							.app-price {
								position: absolute;
								bottom: 0;
								left: 0;
								width: #{210rpx};
								font-size: #{28rpx};
								height: #{50rpx};
								text-align: center;
								background-color: rgba(245, 245, 246, 0.5);
							}
						}
					}
				}
			}

			.app-shop:first-of-type {
				margin-top: 0;
			}

			.app-shop:last-of-type {
				margin-bottom: 0;
			}
		}
	}
</style>
